<template xmlns="http://www.w3.org/1999/html">
  <div id="body">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
             :collapse="isCollapse">
      <el-submenu index="1">

        <!--        下面为商品管理-->
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">商品管理系统</span>
        </template>
        <el-menu-item-group>
          <span slot="title">商品展示</span>
          <el-menu-item index="1-1" @click="showProduct">所有商品</el-menu-item>
          <el-menu-item index="1-2" @click="searchPage">查询商品</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <span slot="title">商品管理</span>
          <el-menu-item index="2-1" @click="GoodPage">上架商品</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <!--      以上为商品管理-->


      <el-menu-item index="2" @click="AllUser">
        <i class="el-icon-menu"></i>
        <span slot="title">用户管理系统</span>
      </el-menu-item>
      <el-menu-item index="3" @click="ShowOrder">
        <i class="el-icon-menu"></i>
        <span slot="title">订单管理系统</span>
      </el-menu-item>
      <el-menu-item index="4" @click="GetFeedBack">
        <i class="el-icon-setting"></i>
        <span slot="title">用户反馈</span>
      </el-menu-item>
    </el-menu>

    <div id="book">
      <!--    下面为商品管理页面-->
      <el-table :data="tableData" style="width: 80%" v-show="book" max-height="670">
        <el-table-column prop="name" label="商品名称" width="150">
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="150">
        </el-table-column>
        <el-table-column prop="desc" label="商品简介" width="120">
        </el-table-column>
        <el-table-column prop="address" label="发货地" width="300">
        </el-table-column>
        <el-table-column prop="num" label="库存" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteProduct(scope.$index, tableData)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    查询商品-->
    <div class="find" v-show="find">
      <el-table :data="searchData" style="width: 80%" max-height="500">
        <el-table-column prop="name" label="商品名称" width="150">
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="desc" label="商品简介" width="120">
        </el-table-column>
        <el-table-column prop="address" label="发货地" width="200">
        </el-table-column>
        <el-table-column prop="num" label="库存" width="120">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteProducts(scope.$index, searchData)">Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <input type="button" value="search" @click="searchByName"
             style="position: relative;top: -100px;left: 840px;background-color: #fff;border:1px #000 none;height: 20px"></input>
    </div>


    <!--    增加商品-->
    <div class="AddGoods" v-show="AddGoods">
      <div class="title">
        上架商品
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="name" style="width: 420px;margin-left: 90px">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price" style="width: 420px;margin-left: 90px">
          <el-input type="text" v-model.number="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品简介" prop="desc" style="width: 420px;margin-left: 90px">
          <el-input type="text" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="发货地" prop="address" style="width: 420px;margin-left: 90px">
          <el-input type="text" v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="num" style="width: 420px;margin-left: 90px">
          <el-input type="num" v-model.number="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品图片上传" style="margin-left: 90px">
          <input type="file"/>
        </el-form-item>
        <el-form-item style="width: 420px;margin-left: 200px">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    用户管理-->
    <div class="user" v-show="user">
      <el-table :data="userData" style="width: 80%" max-height="670">
        <el-table-column prop="id" label="用户id" width="150">
        </el-table-column>
        <el-table-column prop="UserName" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="Num" label="金额" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteUser(scope.$index, userData)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    订单管理页面-->
    <div class="dingdan" v-show="dingdan" style="margin-left: 380px;margin-top: -670px">
      <el-table :data="orderData" style="width: 80%" max-height="670">
        <el-table-column prop="ProductName" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="UserAddress" label="收货地址" width="200">
        </el-table-column>
        <el-table-column prop="Num" label="数量" width="150">
        </el-table-column>
        <el-table-column prop="AllMoney" label="总金额" width="150">
        </el-table-column>
        <el-table-column prop="User" label="用户" width="150">
        </el-table-column>
        <el-table-column prop="Hash" label="Hash" width="150">
        </el-table-column>
      </el-table>
    </div>

    <!--    用户反馈页面-->
    <div class="backed" v-show="backed" style="margin-left: 380px;margin-top: -670px">
      <el-table :data="Feedback" style="width: 80%" max-height="670">
        <el-table-column prop="User" label="反馈人" width="200">
        </el-table-column>
        <el-table-column prop="FeedbackInfo" label="反馈信息" width="300">
        </el-table-column>
        <el-table-column prop="GoodsInfo" label="反馈商品" width="230">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "homePage",
  data() {
    return {
      isCollapse: false,
      tableData: [],
      book: false, //所有商品页面
      searchData: [],
      find: false,//查询商品
      AddGoods: false, //增加商品
      user: false, //用户管理系统
      dingdan: false, //订单管理系统
      backed: false,  //用户反馈
      userData: [],
      Feedback: [],
      orderData: [],//存储订单信息
      search: '',
      ruleForm: {
        name: '',
        price: '',
        desc: '',
        address: '',
        num: '',
      },
      rules: {
        name: [
          {required: true, message: "商品名称不能为空", trigger: 'blur'}
        ],
        price: [
          {required: true, message: "商品价格不能为空", trigger: 'blur'},
          {type: 'number', message: '价格必须为数字值'}
        ],
        desc: [
          {required: true, message: "商品简介不能为空", trigger: 'blur'}
        ],
        address: [
          {required: true, message: "发货地不能为空", trigger: 'blur'}
        ],
        num: [
          {required: true, message: "库存不能为空", trigger: 'blur'},
          {type: 'number', message: '库存必须为数字值'}
        ]
      }
    };
  },
  methods: {
    //展示所有用户反馈
    GetFeedBack() {
      this.book = false
      this.find = false,//查询商品
        this.AddGoods = false, //增加商品
        this.user = false, //用户管理系统
        this.dingdan = false, //订单管理系统
        this.backed = true //用户反馈
      this.$http.get("/admin/feedback", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
        }
      }).then((rep) => {
        this.Feedback = rep.data.feedback
      }).catch((rep) => {
        console.log(rep)
      })
    },
    //展示所有订单
    ShowOrder() {
      this.book = false
      this.find = false,//查询商品
        this.AddGoods = false, //增加商品
        this.user = false, //用户管理系统
        this.dingdan = true, //订单管理系统
        this.backed = false //用户反馈

      this.$http.get("/admin/showAllOrder", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
        }
      }).then((rep) => {
        console.log(rep)
        if (rep.data.code == 401) {//代表用户token过期
          this.$router.push("/admin")
          this.$notify.info({
            title: '系统信息',
            message: '请重新登陆'
          })
        } else {
          this.orderData = rep.data.order
        }
      }).catch((rep) => {
        console.log(rep)
      })
    },
    //搜索页面
    searchPage() {
      this.book = false
      this.find = true,//查询商品
        this.AddGoods = false, //增加商品
        this.user = false, //用户管理系统
        this.dingdan = false, //订单管理系统
        this.backed = false //用户反馈
    },
    GoodPage() {
      this.book = false
      this.find = false,//查询商品
        this.AddGoods = true, //增加商品
        this.user = false, //用户管理系统
        this.dingdan = false, //订单管理系统
        this.backed = false //用户反馈
    },
    //搜索商品
    searchByName() {
      if (this.search != " ") { //代表搜索条件不为空
        const form_data = new FormData()
        form_data.append("name", this.search)
        this.$http.post("/admin/searchProduct", form_data, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
          }
        }).then((rep) => {
          if (rep.data.code == 401) {//代表用户token过期
            this.$router.push("/admin")
            this.$notify.info({
              title: '系统信息',
              message: '请重新登陆'
            })
          } else {
            console.log(rep)
            this.$notify.info({
              title: '系统信息',
              message: rep.data.msg
            })
            this.searchData = rep.data.products
          }
        }).catch((rep) => {
          console.log(rep)
        })
      }
    },
    //展示所有商品
    showProduct() {
      this.book = true
      this.find = false,//查询商品
        this.AddGoods = false, //增加商品
        this.user = false, //用户管理系统
        this.dingdan = false, //订单管理系统
        this.backed = false,  //用户反馈
        this.$http.get("/admin/showProduct", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
          }
        }).then((rep => {
          if (rep.data.code == 401) {//代表用户token过期
            this.$router.push("/admin")
            this.$notify.info({
              title: '系统信息',
              message: '请重新登陆'
            })
          } else {
            console.log(rep)
            this.tableData = rep.data.products
          }
        })).catch((rep) => {
          console.log(rep)
        })
    },

    //搜索页面的删除
    deleteProducts(index, rows) {
      console.log(rows[index])
      const form_data = new FormData()
      form_data.append("name", rows[index].name)
      form_data.append("price", rows[index].price)
      form_data.append("num", rows[index].num)
      form_data.append("address", rows[index].address)
      form_data.append("pic", rows[index].pic)
      form_data.append("desc", rows[index].desc)
      this.$http.post("/admin/deleteProduct", form_data, {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
        }
      }).then((rep) => {
        if (rep.data.code == 401) {//代表用户token过期
          this.$router.push("/admin")
          this.$notify.info({
            title: '系统信息',
            message: '请重新登陆'
          })
        } else {
          this.$notify.info({
            title: '系统信息',
            message: rep.data.msg,
          })
        }
      }).catch((rep) => {
        console.log(rep)
      })
    },

    //下面为删除商品
    deleteProduct(index, rows) {
      console.log(rows[index])
      const form_data = new FormData()
      form_data.append("name", rows[index].name)
      form_data.append("price", rows[index].price)
      form_data.append("num", rows[index].num)
      form_data.append("address", rows[index].address)
      form_data.append("pic", rows[index].pic)
      form_data.append("desc", rows[index].desc)
      this.$http.post("/admin/deleteProduct", form_data, {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
        }
      }).then((rep) => {
        if (rep.data.code == 401) {//代表用户token过期
          this.$router.push("/admin")
          this.$notify.info({
            title: '系统信息',
            message: '请重新登陆'
          })
        } else {
          this.$notify.info({
            title: '系统信息',
            message: rep.data.msg,
          })
          this.showProduct();
        }
      }).catch((rep) => {
        console.log(rep)
      })
    },

    //展示所有用户
    AllUser() {
      this.book = false
      this.find = false,//查询商品
        this.AddGoods = false, //增加商品
        this.user = true, //用户管理系统
        this.dingdan = false, //订单管理系统
        this.backed = false //用户反馈
      this.$http.get("/admin/AllUser", {
        headers: { //带着token请求
          Authorization: "Bearer " + localStorage.getItem("admin_token")
        }
      }).then((rep) => {
        if (rep.data.code == 401) {//代表用户token过期
          this.$router.push("/admin")
          this.$notify.info({
            title: '系统信息',
            message: '请重新登陆'
          })
        } else {
          console.log(rep)
          this.userData = rep.data.data
          for (let i = 0; i <= this.userData.length; i++) {
            this.userData[i].id = i
          }
        }
      }).catch((rep) => {
        console.log(rep)
      })
    },

    //删除用户
    deleteUser(index, rows) {
      console.log(rows)
      this.$http.get("/admin/DeleteUser", {
        params: {
          name: rows[index].UserName,
        }, headers: { //带token去请求
          Authorization: "Bearer " + localStorage.getItem("admin_token")
        }
      }).then((rep) => {
          if (rep.data.code == 401) {//代表用户token过期
            this.$router.push("/admin")
            this.$notify.info({
              title: '系统信息',
              message: '请重新登陆'
            })
          } else {
            if (rep.data.code == 200) {
              this.$notify.info({
                  title: '系统信息',
                  message: '用户删除成功'
                },
                this.AllUser(),
              )
            }
          }
        }
      ).catch((rep) => {
        console.log(rep)
      })
    },

    //增加产品
    submitForm(formName) {
      this.$refs[formName].validate().then(() => {
        const form_data = new FormData(); //定义表单元素来储存数据
        form_data.append("name", this.ruleForm.name)
        form_data.append("price", this.ruleForm.price)
        form_data.append("desc", this.ruleForm.desc)
        form_data.append("address", this.ruleForm.address)
        form_data.append("num", this.ruleForm.num)
        form_data.append("pic", document.querySelector('input[type=file]').files[0])
        this.$http.post("/admin/AddProduct", form_data, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
          }
        }).then((rep) => {
          if (rep.data.code == 401) {//代表用户token过期
            this.$router.push("/admin")
            this.$notify.info({
              title: '系统信息',
              message: '请重新登陆'
            })
          } else {
            this.$notify.info({
              title: '系统信息',
              message: rep.data.msg
            })
            this.ruleForm = []
          }
        }).catch((rep) => {
          console.log(rep)
        })
      });
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  min-height: 670px;
}

#body {
  background-image: linear-gradient(#8A2BE2, #DC143C);
  border: 1px solid #000;
  width: 100%;
  height: 950px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

#book {
  position: absolute;
  top: 70px;
  left: 400px;
}

.find {
  position: fixed;
  top: 70px;
  left: 400px;
  width: 80%;
}

.AddGoods {
  width: 50%;
  height: 600px;
  border: 1px solid #fff;
  position: fixed;
  top: 70px;
  left: 480px;
  background-color: #fff;
  border-radius: 4px;
}

.title {
  font-size: 30px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bolder;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}

.user {
  position: fixed;
  top: 70px;
  left: 400px;
  width: 80%;
}

</style>

